<template>
	<view class="content">
		<z-paging ref="paging"  v-model="dataList" @query="queryList">
			
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top >
				<u-navbar back-text=""
				:leftIconColor="tksetting.titlecolor" 
				:bgColor="tksetting.color" 
				:titleStyle="{color:tksetting.titlecolor}" 
				:title="title"  
				:autoBack="true"  
				:placeholder="true">
				</u-navbar>
				
				<z-tabs 
				bg-color="#fafafa"
				:active-color="tksetting.color"
				mode="subsection"
				:list="tabList" @change="tabChange" />
			</template>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<!-- <u-cell-group>
					<u-cell v-for="(item, index) in dataList" :key="index" :title="item.title"  @click="itemClick(item)" ></u-cell>
			</u-cell-group> -->
			
			<uni-card 
			is-shadow	
			v-for="(item, index) in dataList" :key="index"
			:thumbnail="item.proname.pic"
			:title="item.proname.title" :extra="item.sh_status==1?'已发货':'未发货'">
			   <view style="line-height:200%;">
				   <u--text  :text="`订单号:`+item.oid"></u--text>
				   <u--text type="info" v-if="item.money>0"  :text="`价格:`+item.money"></u--text>
				   <u--text type="info"  v-if="item.jifen>0"  :text="`积分:`+item.jifen"></u--text>
				   <u--text type="info"  v-if="item.emssn!=''"  :text="item.emssn"></u--text>
			   </view>
			</uni-card>
			
		</z-paging>
		
	</view>
</template>
<script>
	import {toast, clearStorageSync, setStorageSync, getStorageSync, useRouter} from '@/utils/utils.js'
	import { mapState } from 'vuex';
	export default {
			data() {
				return {
					title:'我的兑奖',
					dataList: [],
					tabList: ['未发货','已发货'],
					tabIndex: 0,
					cx:''
				}
			},
			onLoad(op) {
				
				uni.setNavigationBarTitle({
					title:this.title
				})
			},
			onReady() {
				
			},
			computed:{
				...mapState(['tksetting'])
			},
			methods: {
				tabChange(index,value) {
					this.tabIndex = index;
					//this.cx = value;
					this.$refs.paging.reload(true);
				},
				queryList(pageNo, pageSize) {
					const params = {
						page: pageNo,
						limit: pageSize,
						type: this.tabIndex //tab的索引，默认从1开始，后台根据这个处理并返回对应的TAB数据
					}
					this.$api.myduijiang(params).then(res => {
						//console.log('list', res);
						if (res.code == 0) {
							this.$refs.paging.complete(res.data);
						}else{
							this.$refs.paging.complete(false);
						}
					})

				},
				itemClick(item) {
					//console.log(item.id)
					const params = {
						id: item.id
					}
					useRouter('/pages/news/info',params,'navigateTo')
				}

				
			}
		}
	</script>
<style lang="scss">
	
.con_box{
	display: flex;
	flex-direction: nowarp;
	height:240rpx;
	margin:20rpx;
	border-bottom: 1rpx solid #efefef;
	.photo{width:240rpx;height:150rpx}
	.photo image{width:240rpx;height:150rpx}
	.text_con{
		flex:1 ;
		margin-left:30rpx;
		.title{
			font-weight: bold;
			font-size: 28rpx;   
		} 
		.addtime{color:#e3e3e3; line-height: 60rpx;}
		.desc{color:#e9e9e9;
				overflow: hidden;
				text-overflow: ellipsis;  /* 超出部分省略号 */
				display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 2; /** 显示的行数 **/
			}
	}
	

}
</style>